<template>
  <div class="person">
    <h1>情况3：</h1>
    <h2>监视【reactive】定义的【对象数据类型】</h2>
    <button @click="changeName">更改名字:{{person.name}}</button>
    <br>
    <button @click="changeAge">更改年龄:{{person.age}}</button>
    <br>
    <button @click="changePerson">更改全部信息:{{person}}</button>
    <br>
  </div>
</template>

<script lang="ts" setup>
  import {reactive,watch} from "vue";

  let person = reactive({
    name:"王二",
    age:29
  })

  function changeName(){
    person.name += '-'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:"李四",age:89})
  }

  //reactive默认开启深度监视
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了', newValue,oldValue)
  })

</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>
